<template>
  <div class="bg">
    <img class="bgimg" src="../images/home1.png" alt="" />
    <div class="box">
      <img
        class="xx c1 active"
        alt=""
        @click="onLevels(1)"
        src="../images/1.png"
      />
      <img
        class="xx c2 active"
        alt=""
        @click="onLevels(2)"
        src="../images/2.png"
      />
      <img
        class="xx c3 active"
        alt=""
        @click="onLevels(3)"
        src="../images/3.png"
      />
      <img class="xx c4" alt="" @click="onLevels(4)" src="../images/4.png" />
      <img class="xx c5" alt="" @click="onLevels(5)" src="../images/5.png" />
      <img class="xx c6" alt="" @click="onLevels(6)" src="../images/6.png" />
      <img class="xx c7" alt="" @click="onLevels(7)" src="../images/7.png" />
      <img class="xx c8" alt="" @click="onLevels(8)" src="../images/8.png" />
      <img class="xx c9" alt="" @click="onLevels(9)" src="../images/9.png" />
      <img class="xx c10" alt="" @click="onLevels(10)" src="../images/10.png" />
      <img class="xx c11" alt="" @click="onLevels(11)" src="../images/11.png" />
      <img class="xx c12" alt="" @click="onLevels(12)" src="../images/12.png" />
      <img class="xx c13" alt="" @click="onLevels(13)" src="../images/13.png" />
      <img class="xx c14" alt="" @click="onLevels(14)" src="../images/14.png" />
      <img class="xx c15" alt="" @click="onLevels(15)" src="../images/15.png" />
    </div>
  </div>
</template>
<script setup>
import { useRouter } from "vue-router";
const route = useRouter();
const onLevels = (value) => {
  route.push({
    path: "/form",
    query: { levels: value },
  });
};
</script>
<style lang="less" scoped>
.bg {
  position: relative;
  width: 100vw;
  height: 100vh;
}
.bgimg {
  width: 100%;
  height: 100%;
}
.box {
  top: 0;
  position: absolute;
  height: 100vh;
  width: 100vw;
}
.xx {
  position: absolute;
  width: 80px;
}
.active {
  filter: sepia(100%) saturate(500%) hue-rotate(0deg);
}
.c1 {
  bottom: 270px;
  left: 25px;
}
.c2 {
  bottom: 320px;
  left: 130px;
}
.c3 {
  bottom: 340px;
  right: 0px;
}
.c4 {
  bottom: 470px;
  right: 40px;
}
.c5 {
  bottom: 570px;
  right: 120px;
}
.c6 {
  bottom: 570px;
  left: 220px;
}
.c7 {
  bottom: 660px;
  right: 220px;
}
.c8 {
  bottom: 670px;
  left: 160px;
}
.c9 {
  bottom: 760px;
  left: 180px;
}
.c10 {
  bottom: 780px;
  left: 300px;
}
.c11 {
  bottom: 810px;
  left: 400px;
}
.c12 {
  bottom: 850px;
  left: 480px;
}
.c13 {
  bottom: 930px;
  left: 470px;
}
.c14 {
  bottom: 970px;
  left: 350px;
}
.c15 {
  bottom: 1050px;
  left: 410px;
}
</style>


